<template>
  <div>
    <div ref="myChart" :style="{width: '100%', height: '800px',margin:'0px auto'}"></div>

  </div>
</template>
<script>
export default {
  data() {
    return {
      nodes: [{
        x: 100,
        y: 700,
        nodeName: '王烽柳',
        svgPath: 'M544  ',
        symbolSize: 70,
      }, {
        x: 300,
        y: 1000,
        nodeName: '开发1',
        svgPath: 'M1172.  '
      },
      {
        x: 300,
        y: 800,
        nodeName: '模块2',
        svgPath: 'M1 615.817355 67.534767l474.733416 170.408432-488.744218 238.180638-471.474695-215.372588z'
      },
      {
        x: 300,
        y: 600,
        nodeName: '模块3',
        svgPath: 'M117 615.817355 67.534767l474.733416 170.408432-488.744218 238.180638-471.474695-215.372588z'
      },
      {
        x: 300,
        y: 400,
        nodeName: '节点1',
        svgPath: 'M887.5  68 68.25472-68.224 68.28544l-0.06144-0.06656z',
      },
      {
        x: 500,
        y: 500,
        nodeName: '节点2',
        svgPath: 'M88  37.71392 0 68.29056 30.57152 68.28544 68.29056 0 37.68832-30.53568 68.25472-68.224 68.28544l-0.06144-0.06656z',
      },
      {
        x: 600,
        y: 700,
        nodeName: '节点3',
        svgPath: 'M887.55  25472-68.224 68.28544l-0.06144-0.06656z',
      },
      {
        x: 500,
        y: 800,
        nodeName: '节点4',
        svgPath: 'M887.55 0.53568 68.25472-68.224 68.28544l-0.06144-0.06656z',
      },
      ],
      charts: {
        nodes: [],
        linesData: [
          {
            coords: [
              [100, 700],
              [300, 1000],
            ]
          },
          {
            coords: [
              [100, 700],
              [300, 800],
            ]
          },
          {
            coords: [
              [100, 700],
              [300, 600],
            ]
          },
          {
            coords: [
              [100, 700],
              [300, 400],
            ]
          },
          {
            coords: [
              [300, 1000],
              [300, 800],
              [300, 600],
              [300, 400],
            ]
          },
          {
            coords: [
              [300, 1000],
              [500, 800],
            ]
          },
          {
            coords: [
              [500, 800],
              [500, 500],
            ]
          },
          {
            coords: [
              [500, 500],
              [600, 700],
            ]
          },
          {
            coords: [
              [600, 700],
              [100, 700],
            ]
          },
          {
            coords: [
              [600, 700],
              [500, 800],
            ]
          },
          {
            coords: [
              [500, 500],
              [300, 400],
            ]
          },
        ]
      },
     
    }
  },
  created() {
    for (var j = 0; j < this.nodes.length; j++) {
      const {
        x,
        y,
        nodeName,
        svgPath,
        symbolSize
      } = this.nodes[j];
      var node = {
        nodeName,
        value: [x, y],
        symbolSize: symbolSize || 50,
        symbol: 'image://' + 'https://img0.baidu.com/it/u=2926715223,1445444764&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
        itemStyle: {
          color: '#5482cc',
        }
      }
      this.charts.nodes.push(node)
    }
    console.log(this.charts.nodes,this.ceshi1);
    this.$nextTick(() => {
      this.drawLine()
    })
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(this.$refs.myChart)
      // 绘制图表
      myChart.setOption({
        // title: {
        //   text: 'group导向图'
        // },
        xAxis: {
          min: 0,
          max: 1000,
          show: false,
          type: 'value'
        },
        // backgroundColor: 'rgba(210,226,249)',
        // color:'red',
        yAxis: {
          min: 0,
          max: 1000,
          show: false,
          type: 'value'
        },
        series: [
          {
            type: 'graph',
            coordinateSystem: 'cartesian2d',
            symbol: 'round',
            roam: true,
            zlevel: 1,
            label: {
              show: true,
              position: 'bottom',
              color: '#767676',
              formatter: function (item) {
                return item.data.nodeName
              }
            },
            // lineStyle: {
            //   type: 'solid',
            //   cap: "round",
            //   join: "round",
            //   width: 10,
            //   color: '#BED0E8',
            //   opacity: 0.5
            // },
            // markPoint: {
            //   symbol: 'arrow',
            //   color: '#5482cc',
            //   symbolSize: 8,
            //   data: this.ceshi1,
            //   opacity: 1
            // },
            data: this.charts.nodes,
          },
          {
            type: 'lines',
            polyline: true,
            coordinateSystem: 'cartesian2d',
            lineStyle: {
              type: 'solid',
              width: 2,
              color: '#BED0E8',
              curveness: 0.3

            },
            effect: {
              show: true,
              trailLength: 0.2,
              symbol: 'arrow',
              color: '#5482cc',
              symbolSize: 11
            },
            data: this.charts.linesData
          }]
      })
      // myChart.on('click', (params) => {
      //   this.$msg_s(params.name + ':' + params.seriesName + ':' + params.value)
      // })
      //  document.getElementById('myChart').setAttribute('_echarts_instance_', '');
    },
  }
}
</script>
<style scoped lang='scss'>
</style>